WebSocket হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম, ডুয়াল-ওয়ে কমিউনিকেশন স্থাপন করতে ব্যবহৃত হয়। এটি বিশেষ করে রিয়েল-টাইম ডেটা ইন্টিগ্রেশন এবং অ্যাপ্লিকেশন তৈরি করার জন্য উপকারী যেখানে ডেটা দ্রুত পরিবর্তিত হয়, যেমন: স্টক মার্কেট, ইভেন্ট ট্র্যাকিং, সোশ্যাল মিডিয়া আপডেটস, অথবা গেম ডেটা।

Angular অ্যাপ্লিকেশন এবং Google Charts API ব্যবহার করে WebSocket এর মাধ্যমে রিয়েল-টাইম ডেটা data binding কিভাবে করা যায় তা এখানে দেখানো হবে। আমরা একটি Line Chart তৈরি করব, যা WebSocket থেকে আসা রিয়েল-টাইম ডেটা দ্বারা আপডেট হবে।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new websocket-real-time
cd websocket-real-time

Step 2: angular-google-charts লাইব্রেরি ইন্সটল করা

Google Charts লাইব্রেরি ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে। এটি ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts প্যাকেজটি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: WebSocket লাইব্রেরি ইন্সটল করা

Angular অ্যাপে WebSocket ইন্টিগ্রেট করতে, আমরা rxjs/webSocket লাইব্রেরি ব্যবহার করব। এটি ইন্সটল করতে:

npm install rxjs

Step 4: GoogleChartsModule এবং WebSocket ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule এবং WebSocket ইমপোর্ট করুন।

app.module.ts ফাইল:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
import { WebSocketSubject } from 'rxjs/webSocket'; // WebSocket ইমপোর্ট

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, GoogleChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 5: WebSocket-এর মাধ্যমে Real-Time Data Fetch এবং Chart Update

এখন আমরা WebSocket ব্যবহার করে রিয়েল-টাইম ডেটা ফেচ করব এবং সেটি Google Chart-এ আপডেট করব।

app.component.ts ফাইল:

import { Component, OnInit } from '@angular/core';
import { WebSocketSubject } from 'rxjs/webSocket'; // WebSocketSubject ইমপোর্ট করা

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Real-Time Data via WebSocket';
  chartType = 'LineChart'; // Chart Type: LineChart
  chartData = [
    ['Time', 'Value']  // Initial data for the chart (empty data)
  ];

  chartOptions = {
    title: 'Real-Time Data Update',
    hAxis: { title: 'Time' },
    vAxis: { title: 'Value' },
    legend: { position: 'top' },
    width: '100%',
    height: 400
  };

  // WebSocket URL (replace with your WebSocket server URL)
  private socket$ = new WebSocketSubject('wss://your-websocket-url');

  // Initializing data point counter
  dataPoint = 0;

  ngOnInit() {
    // Subscribing to WebSocket to receive real-time data
    this.socket$.subscribe((data: number) => {
      this.updateChartData(data); // On new data, update chart
    });
  }

  // Function to update chart data with real-time data
  updateChartData(data: number) {
    this.chartData.push([this.dataPoint++, data]); // Add new data point
    this.redrawChart(); // Trigger chart redraw
  }

  // Function to trigger chart redraw
  redrawChart() {
    // Angular will automatically detect the change and redraw the chart
  }
}

Step 6: HTML ফাইলে Chart রেন্ডার করা

এখন, আমরা app.component.html ফাইলে Google Chart রেন্ডার করব, যাতে রিয়েল-টাইম ডেটা প্রতি সেকেন্ডে আপডেট হয়ে প্রদর্শিত হয়।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google Line Chart with Real-Time Data -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, google-chart কম্পোনেন্টে chartData এবং chartOptions দিয়েছি, যেখানে chartData আসলে WebSocket থেকে আসা রিয়েল-টাইম ডেটা দ্বারা আপডেট হবে।

Step 7: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালাতে:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি একটি Line Chart দেখতে পাবেন, যা WebSocket থেকে আসা ডেটা দ্বারা রিয়েল-টাইমে আপডেট হবে।

Step 8: WebSocket এর মাধ্যমে Data Stream

ধরা যাক, আপনি যদি WebSocket থেকে একটি ডেটা স্ট্রিম ব্যবহার করছেন, তবে এটি Line Chart এর ডেটাকে প্রতি সেকেন্ডে বা নির্দিষ্ট সময়ে আপডেট করবে। এটি একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ রিয়েল-টাইম ডেটা ভিজুয়ালাইজেশন প্রদান করবে। উদাহরণস্বরূপ, আপনি stock price, sensor data, অথবা live event data স্ট্রিম করতে পারেন।

WebSocket URL এবং ডেটা স্ট্রিমের পদ্ধতি আপনার সার্ভারের উপর নির্ভর করবে। এখানে আমরা একটি সাধারণ WebSocketSubject ব্যবহার করেছি, যা WebSocket সার্ভারের সাথে সংযোগ স্থাপন করে এবং ডেটা রিসিভ করে।

সারাংশ

WebSocket এর মাধ্যমে Real-Time Data Binding একটি শক্তিশালী পদ্ধতি যা ক্লায়েন্ট এবং সার্ভারের মধ্যে ডুয়াল-ওয়ে রিয়েল-টাইম কমিউনিকেশন সক্ষম করে। Angular এবং Google Charts ব্যবহার করে, আপনি WebSocket থেকে আসা ডেটা সরাসরি Line Chart বা অন্যান্য চার্টে প্রদর্শন করতে পারেন। WebSocketSubject ব্যবহার করে Angular অ্যাপে রিয়েল-টাইম ডেটা ফেচ করা যায় এবং সেটি Google Chart এর মাধ্যমে ভিজুয়ালাইজ করা যায়।